﻿@{
    ViewBag.PageTitle = "1946 - Thực đơn";
}

<div id="bg"><img width="100%" height="100%" src="/Images/bg-thucdon.png" /></div>  
<div class="monan monan-1">
    <a href="#">
        <img id="monan1-hover" class="hidden monan1-hover" src="/images/monan.png" alt="">
        <img id="monan1" src="/images/monan.png" alt="">
        <div id="" class="popup-monan1">
            <div class="letter-container monan1-hover hidden">
                <p class="title-monan">
                    <a >Ngao nướng mỡ hành</a>
                </p>
                <p class="description-monan">
                    <a>76 đồng bạc</a>
                </p>
            </div>

        </div>
    </a>
</div>
<div class="monan monan-2">
    <a href="#">
        <img id="monan2-hover" class="hidden monan2-hover" src="/images/monan3.png" alt="">
        <img id="monan2" src="/images/monan3.png" alt="">
        <div id="" class="popup-monan2">
            <div class="letter-container monan2-hover hidden">
                <p class="title-monan">
                    <a >Ngao nướng mỡ hành</a>
                </p>
                <p class="description-monan">
                    <a>76 đồng bạc</a>
                </p>
            </div>

        </div>
    </a>
</div>
<div class="monan monan-3">
    <a href="#">
        <img id="monan3-hover" class="hidden monan3-hover" src="/images/monan2.png" alt="">
        <img id="monan3" src="/images/monan2.png" alt="">
        <div id="" class="popup-monan3">
            <div class="letter-container monan3-hover hidden">
                <p class="title-monan">
                    <a >Ngao nướng mỡ hành</a>
                </p>
                <p class="description-monan">
                    <a>76 đồng bạc</a>
                </p>
            </div>

        </div>
    </a>
</div>
<div class="monan monan-4">
    <a href="#">
        <img id="monan4-hover" class="hidden monan4-hover" src="/images/monan4.png" alt="">
        <img id="monan4" src="/images/monan4.png" alt="">
        <div id="" class="popup-monan4">
            <div class="letter-container monan4-hover hidden">
                <p class="title-monan">
                    <a >Ngao nướng mỡ hành</a>
                </p>
                <p class="description-monan">
                    <a>76 đồng bạc</a>
                </p>
            </div>

        </div>
    </a>
</div>
<div class="monan monan-5">
    <a href="#">
        <img id="monan5-hover" class="hidden monan5-hover" src="/images/monan2.png" alt="">
        <img id="monan5" src="/images/monan2.png" alt="">
        <div id="" class="popup-monan5">
            <div class="letter-container monan5-hover hidden">
                <p class="title-monan">
                    <a >Ngao nướng mỡ hành</a>
                </p>
                <p class="description-monan">
                    <a>76 đồng bạc</a>
                </p>
            </div>

        </div>
    </a>
</div>
<div class="monan monan-6">
    <a href="#">
        <img id="monan6-hover" class="hidden monan6-hover" src="/images/monan4.png" alt="">
        <img id="monan6" src="/images/monan4.png" alt="">
        <div id="" class="popup-monan6">
            <div class="letter-container monan6-hover hidden">
                <p class="title-monan">
                    <a >Ngao nướng mỡ hành</a>
                </p>
                <p class="description-monan">
                    <a>76 đồng bạc</a>
                </p>
            </div>

        </div>
    </a>
</div>
<div class="btn-backhome">
    <a href="@Url.Action("Index","Home")">
        <img src="/images/back-home.png"/>
    </a>
</div>
<div class="btn-backmenu">
    <a href="#">
        <img src="/images/menu-back.png"/>
        <p>
            BÀN TRƯỚC
        </p>
    </a>      
</div>
<div class="btn-nextmenu">
    <a href="#">
        <img src="/images/menu-next.png"/>
        <p>
            BÀN TIẾP
        </p>
    </a>        
</div>

<script type="text/javascript">
    $(".monan-1").mouseenter(function () {
        if (!$(this).hasClass('itemfocus')) {
            $(this).addClass('itemfocus');
        }
        if ($(".monan1-hover").hasClass('hidden')) {
            $(".monan1-hover").removeClass('hidden');
        }
        $(function () {
            $(".monan1-hover p a").lettering();
        });
        if (!$("#monan1").hasClass('hidden')) {
            $("#monan1").addClass('hidden');
        }
        if ($("#backdrop").hasClass('hidden')) {
            $("#backdrop").removeClass('hidden');
        }
    });
    $(".monan-1").mouseleave(function () {
        if ($(this).hasClass('itemfocus')) {
            $(this).removeClass('itemfocus');
        }
        if ($("#monan1").hasClass('hidden')) {
            $("#monan1").removeClass('hidden');
        }
        if (!$(".monan1-hover").hasClass('hidden')) {
            $(".monan1-hover").addClass('hidden');
        }
        if (!$("#backdrop").hasClass('hidden')) {
            $("#backdrop").addClass('hidden');
        }
    });
</script>
<script type="text/javascript">
    $(".monan-2").mouseenter(function () {
        if (!$(this).hasClass('itemfocus')) {
            $(this).addClass('itemfocus');
        }
        if ($(".monan2-hover").hasClass('hidden')) {
            $(".monan2-hover").removeClass('hidden');
        }
        $(function () {
            $(".monan2-hover p a").lettering();
        });
        if (!$("#monan2").hasClass('hidden')) {
            $("#monan2").addClass('hidden');
        }
        if ($("#backdrop").hasClass('hidden')) {
            $("#backdrop").removeClass('hidden');
        }
    });
    $(".monan-2").mouseleave(function () {
        if ($(this).hasClass('itemfocus')) {
            $(this).removeClass('itemfocus');
        }
        if ($("#monan2").hasClass('hidden')) {
            $("#monan2").removeClass('hidden');
        }
        if (!$(".monan2-hover").hasClass('hidden')) {
            $(".monan2-hover").addClass('hidden');
        }
        if (!$("#backdrop").hasClass('hidden')) {
            $("#backdrop").addClass('hidden');
        }
    });
</script>
<script type="text/javascript">
    $(".monan-3").mouseenter(function () {
        if (!$(this).hasClass('itemfocus')) {
            $(this).addClass('itemfocus');
        }
        if ($(".monan3-hover").hasClass('hidden')) {
            $(".monan3-hover").removeClass('hidden');
        }
        $(function () {
            $(".monan3-hover p a").lettering();
        });
        if (!$("#monan3").hasClass('hidden')) {
            $("#monan3").addClass('hidden');
        }
        if ($("#backdrop").hasClass('hidden')) {
            $("#backdrop").removeClass('hidden');
        }
    });
    $(".monan-3").mouseleave(function () {
        if ($(this).hasClass('itemfocus')) {
            $(this).removeClass('itemfocus');
        }
        if ($("#monan3").hasClass('hidden')) {
            $("#monan3").removeClass('hidden');
        }
        if (!$(".monan3-hover").hasClass('hidden')) {
            $(".monan3-hover").addClass('hidden');
        }
        if (!$("#backdrop").hasClass('hidden')) {
            $("#backdrop").addClass('hidden');
        }
    });
</script>
<script type="text/javascript">
    $(".monan-4").mouseenter(function () {
        if (!$(this).hasClass('itemfocus')) {
            $(this).addClass('itemfocus');
        }
        if ($(".monan4-hover").hasClass('hidden')) {
            $(".monan4-hover").removeClass('hidden');
        }
        $(function () {
            $(".monan4-hover p a").lettering();
        });
        if (!$("#monan4").hasClass('hidden')) {
            $("#monan4").addClass('hidden');
        }
        if ($("#backdrop").hasClass('hidden')) {
            $("#backdrop").removeClass('hidden');
        }
    });
    $(".monan-4").mouseleave(function () {
        if ($(this).hasClass('itemfocus')) {
            $(this).removeClass('itemfocus');
        }
        if ($("#monan4").hasClass('hidden')) {
            $("#monan4").removeClass('hidden');
        }
        if (!$(".monan4-hover").hasClass('hidden')) {
            $(".monan4-hover").addClass('hidden');
        }
        if (!$("#backdrop").hasClass('hidden')) {
            $("#backdrop").addClass('hidden');
        }
    });
</script>
<script type="text/javascript">
    $(".monan-5").mouseenter(function () {
        if (!$(this).hasClass('itemfocus')) {
            $(this).addClass('itemfocus');
        }
        if ($(".monan5-hover").hasClass('hidden')) {
            $(".monan5-hover").removeClass('hidden');
        }
        $(function () {
            $(".monan5-hover p a").lettering();
        });
        if (!$("#monan5").hasClass('hidden')) {
            $("#monan5").addClass('hidden');
        }
        if ($("#backdrop").hasClass('hidden')) {
            $("#backdrop").removeClass('hidden');
        }
    });
    $(".monan-5").mouseleave(function () {
        if ($(this).hasClass('itemfocus')) {
            $(this).removeClass('itemfocus');
        }
        if ($("#monan5").hasClass('hidden')) {
            $("#monan5").removeClass('hidden');
        }
        if (!$(".monan5-hover").hasClass('hidden')) {
            $(".monan5-hover").addClass('hidden');
        }
        if (!$("#backdrop").hasClass('hidden')) {
            $("#backdrop").addClass('hidden');
        }
    });
</script>
<script type="text/javascript">
    $(".monan-6").mouseenter(function () {
        if (!$(this).hasClass('itemfocus')) {
            $(this).addClass('itemfocus');
        }
        if ($(".monan6-hover").hasClass('hidden')) {
            $(".monan6-hover").removeClass('hidden');
        }
        $(function () {
            $(".monan6-hover p a").lettering();
        });
        if (!$("#monan6").hasClass('hidden')) {
            $("#monan6").addClass('hidden');
        }
        if ($("#backdrop").hasClass('hidden')) {
            $("#backdrop").removeClass('hidden');
        }
    });
    $(".monan-6").mouseleave(function () {
        if ($(this).hasClass('itemfocus')) {
            $(this).removeClass('itemfocus');
        }
        if ($("#monan6").hasClass('hidden')) {
            $("#monan6").removeClass('hidden');
        }
        if (!$(".monan6-hover").hasClass('hidden')) {
            $(".monan6-hover").addClass('hidden');
        }
        if (!$("#backdrop").hasClass('hidden')) {
            $("#backdrop").addClass('hidden');
        }
    });
</script>